<template>
  <!-- 新闻详情 -->
    <div class="newsDetail">
        <head-usual :title="NewsDetails.title" :to="to"></head-usual>
        <!-- 内容部分 -->
        <div class="news-detail">
            <p>{{NewsDetails.title}}</p>
            <div>
                <p>{{NewsDetails.type}}</p>
                <p>
                    <svg class="icon icon-po" aria-hidden="true" >
                      <use xlink:href="#icon-zhouqifuwushiduan"></use>
                    </svg>
                    <span>{{NewsDetails.addtime}}</span>
                    <svg class="icon icon-po" aria-hidden="true" >
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <span>{{NewsDetails.hits}}人浏览</span>
                </p>
            </div>
            <div class="news-item-img">
              <img :src="NewsDetails" v-preview="NewsDetails" preview-title-enable="false" preview-nav-enable="false"/>
            </div>
            <p>{{NewsDetails.subtitle}}</p>
            <div class="news-content" v-html="NewsDetails.info"></div>
        </div>
    </div>
</template>

<script>
import { TabContainer, TabContainerItem } from "mint-ui";
import { GetDetail } from "@/api/news";
export default {
  data() {
    return {
      id: 0,
      NewsDetails: {},
      to:'/news'
    };
  },
  created() {
    this.id = parseInt(this.$route.params.id);
    GetDetail(this.id).then(res => {
      if (res.StatusCode === 200) {
        this.NewsDetails = res.Data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.news-detail {
  padding: 16px 12px;
  border-bottom: 158px solid #f4f4f4;

  > :first-child {
    font-size: 16px;
    color: #333333;
    font-weight: bolder;
  }
  > :nth-child(2) {
    overflow: hidden;
    margin-top: 10px;
    > p {
      float: left;
    }
    > :first-child {
      font-size: 14px;
      color: #999999;
    }
    > :nth-child(2) {
      float: right;
      font-size: 14px;
      color: #999999;
      > span {
        display: block;
        float: left;
      }
      > .icon {
        display: block;
        float: left;
        margin-top: 3px;
        margin-left: 12px;
        margin-right: 10px;
      }
    }
  }
  .news-item-img {
    width: 100%;
    height: 200px;
    margin-top: 10px;
    > img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
    }
  }
  > :nth-child(4) {
    font-size: 14px;
    color: #666666;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-top: 13px;
    text-indent: 2em;
  }
}
</style>
